<template>
    <div>
        <van-pull-refresh class="boxaw" v-model="isLoading" @refresh="onRefresh">
            <van-nav-bar title="- 请如实填报 -" />

            <van-form @submit="onSubmit">
                <van-cell-group class="ab" title="姓名">
                    <van-field v-model="username" type="String" :rules="formRyles.xm" placeholder="请输入姓名" />
                </van-cell-group>
                <van-cell-group class="ab" title="手机号">
                    <van-field v-model="phone" type="number" :rules="formRyles.mobile" placeholder="请输入手机号" />
                </van-cell-group>
                <van-cell-group class="ab" title="事发港区">
                    <van-field name="radio" :rules="formRyles.xx">
                        <template #input>
                            <van-radio-group v-model="radio" direction="horizontal">
                                <van-radio name="1">东港</van-radio>
                                <van-radio name="2">西港</van-radio>
                                <van-radio name="3">南港</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group title="嫌疑人所在船舶国籍">
                    <van-field v-model="xyr1" :rules="formRyles.gj" placeholder="可填写不确定" />
                </van-cell-group>
                <van-cell-group title="嫌疑人所在船舶IMO号">
                    <van-field v-model="xyr2" :rules="formRyles.ch" placeholder="可填写不确定" />
                </van-cell-group>
                <van-cell-group class="ab" title="举报详情">
                    <van-field v-model="jb" :rules="formRyles.xq" placeholder="如详细描述，时间，地点，经纬度等" />
                </van-cell-group>
                <van-button native-type="submit" round type="info" size="large" class="yd" block>马上提交
                </van-button>
            </van-form>
        </van-pull-refresh>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0,
                isLoading: false,
                username: "",
                phone: "",
                radio: '1',
                xyr1: "",
                xyr2: "",
                jb: '',
                // **登录表单校验规则**
                formRyles: {
                    // 手机号校验规则
                    mobile: [{
                            required: true,
                            message: ''
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机格式错误'
                        }
                    ],
                    xm: [{
                        required: true,
                        message: ""
                    }],
                    xq: [{
                        required: true,
                        message: ""
                    }],
                    gj: [{
                        required: true,
                        message: ""
                    }],
                    gj: [{
                        required: true,
                        message: ""
                    }],
                    ch: [{
                        required: true,
                        message: ""
                    }],
                }
            };

        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            // mstj() {
            //     this.$router.push('/tjcg')
            // },
            onSubmit(values) {
                console.log('submit', values);
                console.log(123);
                this.$router.push('/tjcg')
            },
        },
    };
</script>

<style scoped>
    .van-cell-group__title {
        color: #6b6262;
    }

    .van-cell-- {
        background-color: #a6a6a626;
    }

    .boxaw {
        height: 100vh;
    }

    .van-cell-group__title:before {
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;

    }

    /* .ab:before {
        position: relative;
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;
        top: -25px;
        left: 5px;
    } */
</style>